昨天我們做了一個登入頁面，可是使用者還是可以任意轉跳到其他頁面，今天我們要讓其它頁面加上驗證項目，讓登入頁面變成我們的大門。

今天目標：

1. 設定 router 驗證。
2. 如果 token 不存在，請轉跳到 /login 讓使用者重新登入。

meta

meta 路由表訊息
meta 可以說是路由表中可以自訂設計的開發區域，可以把這邊當作自訂的 config 看待。

自由設計記錄一些參數

如 requiresAuth 是我們這次記錄 是否需要驗證 自訂的參數。

matched

如何讀取到 meta ?

使用 matched 用來顯示此路由表物件所有訊息。

因此 matched.meta.requiresAuth 就是我們紀錄的 是否需要驗證 參數。

router.beforeEach Hook

在哪邊讀取 meta ？

router.beforeEach Hook 為 vue-router 轉跳之前必會觸發的 function

因此我們可以把頁面轉跳的驗證設計在這邊。

router.beforeEach((to, from, next) => { // some code.. }

帶有 3 個參數：

next(false); 將會中斷事件，轉跳到回 from 原始路由頁面
next 的設計有點像 node.js express middleware

因此我們就可以在這邊解析 to.matched.requiresAuth 判斷要轉跳的頁面 是否需要驗證

main.js

const router = new VueRouter({
  // 使用 HTML 5 模式（沒有 hash, ex: #/hello）
  mode: 'history',
  base: __dirname,
  // routre 表
  routes: [
    {
      path: '/hello',
      name: 'hello',
      component: Hello,
      meta: { requiresAuth: true }, // 需驗證
    },
// 中間都要需要設定驗證，略..
    {
      path: '/login',
      name: 'login',
      component: login,
      meta: { requiresAuth: false }, // 不需驗證
    },
    // 當 url path 不符合 router 表的時候，預設轉址到
    // 順序一定要最後面
    { path: '/*', redirect: '/login' }
  ]
});

router.beforeEach((to, from, next) => {
  // 如果 router 轉跳的頁面需要驗證 requiresAuth: true
  console.log('to=', to.fullPath, '| from=', from.fullPath);
  if (to.matched.some(record => {
    console.log(record.name, record.meta.requiresAuth);
    return record.meta.requiresAuth;
  })) {
    // 如果沒有 token 
    console.log('token?', store.state.token);
    if (store.state.token === '') {
      // 轉跳到 login page
      next({ path: '/login' });
    } else {
      next(); // 往下繼續執行
    }
  } else {
    next(); // 往下繼續執行
  }
});

因此這段邏輯主要是檢查要轉跳到的頁面需要驗證，並且 state 裡面沒有 token 的時候。

否則就執行下一步驟，進入路由表。

未登入，或不知名狀況 token 被清空了。

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。